<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <title>Guess Card</title>
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" />
    <link
      href="../static/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery.cookie.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/MessageBox.js"></script>

    <style>
      * {
        margin: 0; /* 消除边界*/
        padding: 0;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      body {
        position: relative;
        overflow: hidden;
      }
      .bg {
        position: relative;
        padding-top: 100px;
        padding-left: 160px;
      }
      .main-logo {
        position: absolute;
        width: 322px;
        height: 170px;
        background-image: url(../static/main-logo.png);
        background-size: cover;
        left: 50%;
    top: 0;
    margin-left: -161px;
      }
      .game_box {
        background: linear-gradient(
          180deg,
          rgba(22, 0, 0, 0.9) 0%,
          rgba(141, 36, 35, 0.53) 100%
        );
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
        border-radius: 28px;
        width: 1140px;
        height: 725px;
        padding: 27px 39px;
      }
      .game_box_main {
        background-image: url(../static/game_box_main_bg.png);
        background-size: cover;
        width: 608px;
        height: 608px !important;
        padding: 12px 12px;
        border-radius: 18px;
      }
      .game_box_nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .game_box_nav_item {
        display: flex;
        align-items: center;
      }
      .game_box_nav_item .value {
        font-weight: 600;
        font-size: 36px;
        color: #ffffff;
        line-height: 50px;
        text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
      }
      .game_box_nav_item .label {
        font-weight: 300;
        font-size: 24px;
        color: #ffffff;
      }

      .game_box_nav_item .decorate {
        width: 6px;
        height: 22px;
        background: #ffed75;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
        border-radius: 3px;
      }

      .bg:before {
        width: 100%;
        height: 100%;
        background-image: url(../static/bg.jpg);
        background-size: 100% 100%;
        background-attachment: fixed; /*将图片固定*/
        position: absolute; /*图片定位*/
        top: 0;
        left: 0;
        content: "";
        z-index: -1; /*设置该标签等级，让其始终位于最上层*/
        -webkit-filter: opacity(
          70%
        ); /*设置透明度   blur还可以改变照片的模糊度*/
        filter: opacity(70%);
      }
      .content {
        height: 100vh;
      }
      .img-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        margin: 0;
      }
      .game_box_operation {
        margin-left: 24px;
        width: 430px;
        height: 600px;
        background: linear-gradient(
          180deg,
          #3a0c0c 0%,
          rgba(0, 43, 142, 0.31) 57%,
          #326ffa 100%
        );
        box-shadow: inset 0px 15px 24px 0px rgba(221, 153, 121, 0.52);
        border-radius: 12px;
        padding: 27px;
      }
      .cart-name-label {
        font-weight: 600;
        font-size: 24px;
        color: #ffffff;
        line-height: 33px;
        text-align: left;
        margin-bottom: 12px;
      }
      #cardNameInput {
        height: 60px;
        background: #f6f6f6;
        box-shadow: inset 0px 4px 6px 0px rgba(91, 50, 50, 0.5);
        border-radius: 12px;
        margin-bottom: 12px;
      }
      #submitBtn {
        background-image: url(../static/submit_answer.png);
        height: 94px;
        background-size: cover;
        cursor: pointer;
      }
      .tips-operation {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 41px;
        align-items: center;
        margin-bottom: 18px;
      }
      .tips-operation-btn {
        width: 153px;
        height: 41px;
      }
      .get_tips {
        background-image: url(../static/get_tips.png);
        background-size: cover;
        cursor: pointer;
      }
      .show_answer {
        background-image: url(../static/show_answer.png);
        background-size: cover;
        cursor: pointer;
      }
      .tips-box {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../static/tips_box_bg.png);
        background-size: cover;
        cursor: pointer;
        margin-bottom: 19px;
      }
      .tips-text {
        width: 210px;
        height: 46px;
        background-image: url(../static/tips_text.png);
        background-size: cover;
        cursor: pointer;
      }
      #tipInfo {
        width: 100%;
        display: none;
        margin-bottom: 19px;
        height: 140px;
        background: transparent;
        border-radius: 12px;
        border: 1px solid #ad716e;
        padding: 20px;
        flex-direction: column;
        justify-content: flex-start;
        background: rgba(216, 216, 216, 0.2);
      }
      #tipInfo .tips-item{
        display: flex;
        align-items: center;
      }
      #tipInfo .tips-item span {
        font-size: 16px;
color: #FFFFFF;
font-weight: 400;
      }
      #tipInfo .tips-item {
        font-weight: 600;
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 8px;
      }
      #tipInfo .tips-item img {
        width: 19px;
        height: 22px;
      }
      #nextBtn {
        height: 94px;
        background-image: url(../static/next-button-bg.png);
        background-size: cover;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
font-size: 26px;
color: #032E50;
      }
      .nextBtn-text {
        margin-right: 15px;
      }
      .rank-box {
        width: 420px;
        height: 725px;
        padding: 30px 18px;
        border-radius: 28px;
      }
      .play-rank-text-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 14px;
        height: 57px;
      }
      .play-rank-text {
        font-weight: 600;
        font-size: 32px;
        color: #ffe0ab;
        line-height: 45px;
        margin: 0 8px;
      }
      .play-rank-text-left {
        text-align: right;
      }
      .play-rank-text-right {
        text-align: left;
      }
      .play-rank-text-1 {
        width: 45px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
        margin-bottom: 8px;
      }
      .play-rank-text-2 {
        width: 21px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
      }
      .img-part {
        width: 194px;
        height: 194px;
        padding: 0;
      }
      img[src=""],
      img:not([src]) {
        opacity: 0;
      }

      .font-20 {
        font-size: 20px;
      }
      .font-18 {
        font-size: 18px;
      }
      .font-16-bold {
        font-size: 16px;
        font-weight: bolder;
      }
      .header-left {
        height: 54px;
        background: linear-gradient(
          270deg,
          rgba(127, 53, 53, 0) 0%,
          rgba(125,52,52,0.6) 100%,
          rgba(118, 49, 49, 0) 28%,
          rgba(109, 44, 44, 0) 59%,
          rgba(100, 43, 43, 0.6) 62%,
          rgba(99, 39, 39, 0.6) 91%,
          rgba(72, 24, 24, 0) 100%
        );
        margin-bottom: 11px;
        line-height: 54px;
        display: inline-block;
        padding-left: 50px;
      }
      .header-left img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        margin-bottom: 8px;
      }
      .header-left span {
        font-weight: 500;
        font-size: 24px;
        color: #FFFFFF;
      }
      .header-right {
        height: 54px;
        background: linear-gradient(
          270deg,
          rgba(125,52,52,0.6) 0%,
          rgba(127, 53, 53, 0) 100%,
          rgba(118, 49, 49, 0) 28%,
          rgba(109, 44, 44, 0) 59%,
          rgba(100, 43, 43, 0.6) 62%,
          rgba(99, 39, 39, 0.6) 91%,
          rgba(72, 24, 24, 0) 100%
        );
        margin-bottom: 11px;
        line-height: 54px;
        display: flex;
        width: 420px;
        align-items: center;
        justify-content: flex-end;
        padding-right: 50px;
        font-weight: 500;
        font-size: 24px;
        color: #FFFFFF;
      }
      .header-right img {
        width: 32px;
        height: 32px;
        margin: 0 25px;
      }
      .rank-th-row {
        background: linear-gradient(rgba(255, 220, 76, 0.57) 0%, rgba(255, 128, 18, 0.06) 100%);
    height: 36px;
    color: #fff;
      }
      .rank-table-tr {
        height: 35px;
        font-size: 16px;
color: #FFFFFF;

      }
      .rank-table-tr td div{
        width: 95.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 20px 0;
      }
      .rank-table-tr-td1 {
        padding-left: 12px;
      }
      .rank-table-tr td .rank {
        width: 44px;
        height: 34px;
        text-align: center;
      }
      .rank-table-tr td .rank1 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank1.png);
        background-size: cover;
      }
      .rank-table-tr td .rank2 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank2.png);
        background-size: cover;
      }
      .rank-table-tr td .rank3 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank3.png);
        background-size: cover;
      }
      #result {
        font-size: 16px;
color: #FFFFFF;
line-height: 22px;
height: 22px;
display: inline-block;
text-align: center;
margin-bottom: 15px;
width: 100%;
      }
    </style>
  </head>
  <script type="text/javascript">
    let answer_count = 0;
    let correct_count = 0;
    let cardNameNow = [];
    let isSuccessFlag = false;
    let tips = [];
    let tipFlag = 0;
    let tipStr = "";

    $(document).ready(function () {
      let userName = $.cookie("userName");
      let score = $.cookie("score");
      if (userName != null && userName != "") {
        $("#userCurrent").text(userName);
        $("#playerName").text(userName);
        if (score != null && score != "") {
          $("#score").text(score);
        }
      }
      refreshQuestion();
      updateScore(0); // 不更新积分 但刷新排名
      setZoom(); // 调整缩放比例

        //捕捉回车动作
        $(document).keyup(function (e) {//捕获文档对象的按键弹起事件
            // 回车 提交答案
            if (e.keyCode == 13) {
                if(!$("#submitBtn").prop("disabled")){
                    submitAnswer();
                }
            }
            // 右方向键 下一题
            else if (e.keyCode == 39) {
                if(!$("#submitBtn").prop("disabled")){
                    next();
                }
            }
           {# // H 获取提示
            else if (e.keyCode == 72) {
                if(!$("#submitBtn").prop("disabled")){
                    getTips();
                }
            }
            // 空格键 获取提示
            else if (e.keyCode == 32) {
                if(!$("#submitBtn").prop("disabled")){
                    showAnswer();
                }
            }#}
        });

        // 阻止打开调试窗
        document.onkeydown=function (e){
            if (e.key === "F12") {
                e.cancelBubble = true;
                e.returnValue = false;
                MessageBox.alert("F12已经禁用了哦");
            }
        }

       {# // 防止鼠标右键浏览器‘检查’操作
        setInterval(function () {
            debugger;
        }, 100)#}

        // 禁止右键
        document.oncontextmenu = function () { return false; };
    });

    /*
     * inputName 输入的名字
     * nameList 译名集合
     * return boolean
     */
    function cardNameReg(inputName, nameList) {
      // 卡牌名正则
      let reg = /[^\u4e00-\u9fa5A-z0-9]+/g;
      let nameMap = nameList.map((e) => e.replace(reg, ""));
      let inputMap = inputName.replace(reg, "");
      return nameMap.includes(inputMap);
    }

    function submitAnswer() {
      if ($("#submitBtn").attr("disabled")) {
        return
      }
      let cardNameInput = $("#cardNameInput").val().trim();
      if (cardNameInput == "") {
          MessageBox.alert("尚未输入卡牌名称！");
        return;
      }
      if (cardNameReg(cardNameInput, cardNameNow)) {
        isSuccessFlag = true;
        correct_count++;
        $("#submitBtn").attr("disabled", true); // 暂时禁用提交按钮
        updateScore(4 - tipFlag); // 答对最多4分,用一次提示少一分
        $("#result").text("恭喜你答对了，可进行下一题！");
        // $("#result").css("color", "green");
      } else {
        $("#result").text("很遗憾，你答错了！");
        // $("#result").css("color", "red");
      }
    }

    function next() {
      if (!isSuccessFlag) {
        if (tipFlag < 3) {
            MessageBox.alert("还有" + (3 - tipFlag) + "次提示未使用！");
          return;
        }
        updateScore(-1); // 答错扣1分
        // $("#result").css("color", "black");
        // $("#result").text("展示正确答案，即将进入下一题...");
      }
      answer_count++;
      $("#answered_count").text(answer_count + "题");
      let correct_rate = ((correct_count * 100) / answer_count).toFixed(2);
      $("#correct_rate").text(correct_rate);

      setTimeout(refreshQuestion, 3000);
      $("#submitBtn").attr("disabled", false);
      var obj = document.getElementById("nextBtn");
      time(obj, 3);
    }

    function getTips() {
      tipFlag++;
      $(".tips-box").css("display", "none");
      $("#tipInfo").css("display", "flex");
      if (tipFlag == 1) {
        tipStr += "【提示1】: " + tips[0] + "\n";
        // $("#tipInfo").text(tipStr);
        $("#tipInfo").append("<div class='tips-item tips-mar'><img src='../static/icon-tips.png' /> <span>【提示1】:</span> " + tips[0] + "</div>")
      } else if (tipFlag == 2) {
        // tipStr += "【提示2】: " + tips[1] + "\n";
        $("#tipInfo").append("<div class='tips-item tips-mar'><img src='../static/icon-tips.png' /> <span>【提示2】:</span> " + tips[1] + "</div>")
      } else if (tipFlag == 3) {
        // tipStr += "【提示3】: 已拓展截图区域";
        $("#cardPicPart_" + tips[2].y + "-" + tips[2].x).attr(
          "src",
          "data:image/png;base64," + tips[2].pic
        );
        $("#tipInfo").append("<div class='tips-item'><img src='../static/icon-tips.png' /> <span>【提示3】:</span> " + '已拓展截图区域' + "</div>")
      } else {
          MessageBox.alert("提示次数已用完！");
      }
    }

    function refreshQuestion() {
      $(".img-part").attr("src", "");
      
      $(".img-part").show();
      $("#cardPicComplete").hide();
      $("#result").text("");
      $("#cardNameInput").val("");
      $("#tipInfo").empty();
      $(".tips-box").css("display", "flex");
      $("#tipInfo").css("display", "none");
      isSuccessFlag = false;
      tipFlag = 0;
      tipStr = "";
      $.ajax({
        type: "get",
        url: "/get/data",
        contentType: "application/json",
        async: false,
        success: function (data, status) {
          if (data != null && data != "") {
            tips = [];
            cardNameNow = [];
            cardNameNow.push(data.data.card_name_ygopro);
            cardNameNow.push(data.data.card_name_cnoffical);
            cardNameNow.push(data.data.card_name_md);
            cardNameNow.push(data.data.card_name_nwbbs);
            cardNameNow.push(data.data.card_name_cnocg);
            tips.push(data.data.tip1);
            tips.push(data.data.tip2);
            tips.push({
              x: data.data.x_tip3,
              y: data.data.y_tip3,
              pic: data.data.tip3,
            });
            $("#cardPicPart_" + data.data.y + "-" + data.data.x).attr(
              "src",
              "data:image/png;base64," + data.data.cut_pic
            );
            $("#cardPicComplete").attr("src", data.data.origin_pic);
          }
        },
        error: function () {
            MessageBox.alert("调用异常，操作失败!");
        },
      });
    }

    // 查看答案
    function showAnswer() {
      if (!isSuccessFlag) {
        // 未提交过答案，建议先看提示
        if (!$("#submitBtn").prop("disabled")) {
          if (tipFlag < 3) {
              MessageBox.alert("还有" + (3 - tipFlag) + "次提示,不看看吗！");
            return;
          }
        }
      }
      $("#submitBtn").attr("disabled", true);
      $(".img-part").hide();
      $("#cardPicComplete").show();
      $("#cardNameInput").val(cardNameNow[3]);
    }

    // 更新分数
    function updateScore(inc) {
      $.ajax({
        type: "post",
        url: "/game/update/score",
        data: {
          inc: inc,
          user: $.cookie("userName")?.trim(),
        },
        dataType: "json",
        async: false,
        success: function (data, status) {
          if (data != null && data.list.length > 0) {
            $("#score").text(data.score);
            refreshRank(data.list);
          }
        },
        error: function () {
            MessageBox.alert("调用异常，操作失败!");
        },
      });
    }

    // 刷新排名
    function refreshRank(rankList) {
      $("#rankInfo").html("");
      let head =
        '<tr role="row" class="rank-th-row" style="width:100%;margin: 0;padding: 0">\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0; padding-left: 12px;">排名</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">玩家</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">积分</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">段位</th>\n' +
        // '                                <th class="col-xs-3" style="text-align: left;padding: 0">' +
        // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
        // '                                          title="积分规则：\n无提示答对积4分,每使用一次提示扣1分，提示用完跳过扣1分">' +
        // "                                        积分</span></th>\n" +
        // '                                <th class="col-xs-3" style="text-align: left;padding: 0;">\n' +
        // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
        // '                                          title=\"\<50:黑铁\n50-100:青铜\n100-300:白银\n300-800:黄金\n800-1500:钻石\n\>=1500:大师\n\">' +
        // "                                        段位</span></th>\n" +
        "                            </tr>";
      $("#rankInfo").append(head);
      for (let i = 0; i < rankList.length; i++) {
        let rankContent = "";
        const rankInfo = rankList[i];
        if (rankInfo != null) {
          let tier = "";
          if (rankInfo[1] < 20) {
            tier = "<span >黑铁</span>";
          } else if (rankInfo[1] < 100) {
            tier = "<span >青铜</span>";
          } else if (rankInfo[1] < 300) {
            tier = "<span >白银</span>";
          } else if (rankInfo[1] < 800) {
            tier = "<span >黄金</span>";
          } else if (rankInfo[1] < 1500) {
            tier = "<span >钻石</span>";
          } else {
            tier = "<span >大师</span>";
          }
          rankContent += "<tr class='rank-table-tr'>";
          if (i === 0) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank1'></div></td>";
          } else if (i === 1) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank2'></div></td>";
          } else if (i === 2) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank3'></div></td>";
          } else {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank'>" + (i + 1) + "</div></td>";
          }
          rankContent += "<td><div>" + rankInfo[0] + "</div></td>";
          rankContent += "<td><div>" + rankInfo[1] + "</div></td>";
          rankContent += "<td><div>" + tier + "</div></td>";
          rankContent += "</tr>";
          $("#rankInfo").append(rankContent);
        }
      }
    }

    function time(obj, wait) {
      if (wait == 0) {
        obj.removeAttribute("disabled");
        obj.innerHTML = "下一题";
      } else {
        obj.setAttribute("disabled", true);
        obj.innerHTML = wait + " 秒";
        wait--;
        setTimeout(function () {
          time(obj, wait);
        }, 1000);
      }
    }

    function logout() {
      $.cookie("userName", "", { expires: -1 });
      $.cookie("score", "", { expires: -1 });
      location.href = "/";
    }

    function setZoom() {
        // 1920*1080 1k
        // 2560*1600 2k
        // 3200*1800 3k
        // 3840*2160 4k
        // 分段区间和缩放比例可灵活调整
        const maxWidth = window.innerWidth;
        if(maxWidth>=3840) {
            document.body.style.zoom = 2;
        }else if(maxWidth>=2600&&maxWidth<3840){
            document.body.style.zoom = 1.65;
        }else if(maxWidth>=2400&&maxWidth<2600){
            document.body.style.zoom = 1.36;
        }else if(maxWidth>=1900&&maxWidth<2400){
            document.body.style.zoom = 1;
        }else if(maxWidth>=1600&&maxWidth<1900){
            document.body.style.zoom = 0.9;
        }else if(maxWidth>=1200&&maxWidth<1600){
            document.body.style.zoom = maxWidth / 1600;
        }else if(maxWidth>=800&&maxWidth<1200){
            document.body.style.zoom = maxWidth / 1600;
        }else if(maxWidth>=500&&maxWidth<800){
            document.body.style.zoom = maxWidth / 800
        }else{
            document.body.style.zoom = maxWidth / 450;
        }
      }

  </script>
  <body>
    <div class="row bg">
      <div class="main-logo"></div>
      <div class="col-xs-8 content">
        <div class="row header header-left">
          <img src="../static/tips.png" alt=""> 
          <span>快捷键：提交回答 - 回车键  |  下一题 - 方向 →</span>
          </h2>
        </div>
        <div class="row game_box">
          <div
            class="col-xs-12 game_box_nav"
            style="
              height: 10%;
              text-align: center;
              line-height: 50px;
              font-size: 30px;
            "
          >
            <div class="game_box_nav_item">
              <div class="decorate"></div>
              <div class="label">已回答：</div>
              <div id="answered_count" class="value">0</div>
            </div>
            <div class="game_box_nav_item">
              <div class="decorate"></div>
              <div class="label">正确率：</div>
              <div id="correct_rate" class="value">0</div>
            </div>
            <div class="game_box_nav_item">
              <div class="decorate"></div>
              <div class="label">本次积分：</div>
              <div id="score" class="value">0</div>
            </div>
          </div>
          <div
            class="col-sm-7 game_box_main"
            style="
              height: 90%;
              border: solid 1px #6b686887;
              background-color: #565656;
            "
          >
            <div class="row img-box">
              {#<img
                alt=""
                id="cardPicPart"
                style="display: block; position: absolute; left: 40%; top: 35%"
                src=""
              />
              <img
                alt=""
                id="cardPicComplete"
                style="max-width: 100%; height: 100%; display: none"
                src=""
              />#}
              <img class="img-part" src="" id="cardPicPart_0-0" />
              <img class="img-part" src="" id="cardPicPart_0-1" />
              <img class="img-part" src="" id="cardPicPart_0-2" />
              <img class="img-part" src="" id="cardPicPart_1-0" />
              <img class="img-part" src="" id="cardPicPart_1-1" />
              <img class="img-part" src="" id="cardPicPart_1-2" />
              <img class="img-part" src="" id="cardPicPart_2-0" />
              <img class="img-part" src="" id="cardPicPart_2-1" />
              <img class="img-part" src="" id="cardPicPart_2-2" />
              <img
                alt=""
                id="cardPicComplete"
                style="max-width: 100%; height: 100%; display: none"
                src=""
              />
            </div>
          </div>
          <div class="col-sm-5 game_box_operation">
            <div class="cart-name-label">卡牌名称：</div>
            <input
              type="text"
              class="form-control font-20"
              id="cardNameInput"
              placeholder="填写完整卡名"
            />
            <div
              class="font-20"
              id="submitBtn"
              onclick="submitAnswer()"
            ></div>

              <span id="result" class="font-20"></span>
        
            <div class="tips-operation">
              <div
                class="tips-operation-btn get_tips"
                style="margin-right: 12%"
                onclick="getTips()"
              ></div>
              <div
                class="tips-operation-btn show_answer"
                id="showAnswerBtn"
                onclick="showAnswer()"
              ></div>
            </div>
            <div class="tips-box">
              <div class="tips-text"></div>
            </div>
            <div id="tipInfo" readonly></div>
            <div id="nextBtn" onclick="next()">
              <span class="nextBtn-text">下一题</span>
              <span>>></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-3" style="height: 100vh">
        <div class="row header header-right">
          <img src="../static/icon-user.png" alt="" />
          <span id="userCurrent"></span>
          <img src="../static/icon-loginOut.png" alt=""/>
          <span onclick="logout()">退出</span>
        </div>
        <div class="row game_box rank-box">
          <div class="play-rank-text-box">
            <div class="play-rank-text-left">
              <div class="play-rank-text-1"></div>
              <div class="play-rank-text-2" style="margin-left: 24px"></div>
            </div>
            <div class="play-rank-text">玩家排名</div>
            <div class="play-rank-text-right">
              <div class="play-rank-text-1"></div>
              <div class="play-rank-text-2"></div>
            </div>
          </div>
          <div
            class="col-xs-12"
            style="
              width: 100%;
              height: 85%;
              border: solid 1px #6b686887;
              padding: 0;
            "
          >
            <div
              style="
                width: 100%;
                height: 90%;
                margin: 5px;
                font-size: 13px;
                border: none;
                background: none;
                overflow: auto;
              "
            >
              <table id="rankInfo" style="width: 100%"></table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
